<template>
  <el-card class="mt-20 mr-20" shadow="never">
    <el-form :disabled="permissionDisabled()" ref="formRef" :rules="rules" :model="form" label-width="200px" label-position="left" class="form-readonly">
      <el-form-item :label="$t('pageStr.enableBasicAlarmStr')">
        <el-switch v-model="form.alarmEnable" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <div v-if="form.alarmEnable === '1'">
        <el-form-item :label="$t('pageStr.alarmServerIPAddrStr')" style="max-width: 500px">
          <el-input v-model="form.alarmServerIPAddr" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.alarmServerPortStr')" style="max-width: 500px">
          <el-input v-model="form.alarmServerPort" clearable/>
        </el-form-item>
        <el-form-item :label="$t('pageStr.alarmServerProtocolStr')" style="max-width: 500px;margin-bottom: 30px">
          <el-select v-model="form.alarmServerProtocol" clearable class="w-full">
            <el-option v-for="item of warningCycle" :label="item" :value="item.toLowerCase()"></el-option>
          </el-select>
        </el-form-item>
        <div class="table-header">
          <span style="width: 300px;display: inline-block;text-align: center">{{ $t('pageStr.alarmTypeStr') }}</span>
          <span style="width: 300px;display: inline-block;text-align: center">{{ $t('pageStr.thresholdStr') }}</span>
          <span style="width: 200px;text-align: center;display: inline-block">{{ $t('menuStr.applicationStr') }}</span>
        </div>
        <el-form-item label-width="300" class="table-row">
          <template #label>
            <div style="text-align: center" class="w-full">{{ $t('pageStr.cpuUseAlStr') }}</div>
          </template>
          <div class="flex flex-center" style="width: 300px">
            <el-input-number v-model="form.cpuUseThreshold" :min="0" :max="100" class="mr-10"/>
            %
          </div>
          <div class="flex flex-center" style="width: 200px;">
            <el-switch v-model="form.cpuUseAlarm" active-value="1" inactive-value="0"></el-switch>
          </div>
        </el-form-item>
        <el-form-item label-width="300" class="table-row">
          <template #label>
            <div class="w-full flex flex-center">{{ $t('pageStr.memoryUseAlStr') }}</div>
          </template>
          <div class="flex flex-center" style="width: 300px">
            <el-input-number v-model="form.memoryThreshold" :min="0" :max="100" class="mr-10"/> %
          </div>
          <div class="flex flex-center" style="width: 200px;">
            <el-switch v-model="form.memoryAlarm" active-value="1" inactive-value="0"></el-switch>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
  <el-button v-permissionShow style="margin-top: 20px;width: 110px;color: #fff" color="#C29B74" @click="handleSubmit">
    {{ $t('tabsStr.applyStr') }}
  </el-button>
</template>

<script setup>
import {ref, onBeforeMount} from 'vue'
import {reqSetBasicAlarm, reqGetBasicAlarm} from '@/api/application/basic-alarm'
import {ElMessage} from "element-plus";
import {useI18n} from 'vue-i18n'
import {permissionDisabled} from '@/utils'

const {t} = useI18n()
const rules = {}
const formRef = ref(null)
const form = ref({
  alarmServerIPAddr: '',
  alarmEnable: '',
  alarmServerPort: '',
  alarmServerProtocol: '',
  cpuUseAlarm: '',
  cpuUseThreshold:'',
  memoryThreshold:'',
  memoryAlarm: '',
})

onBeforeMount(getData)

function getData() {
  reqGetBasicAlarm().then((res) => {
    form.value = res.alarmBasic
    console.log('基本告警读取', form.value)
  })
}

function handleSubmit() {
  formRef.value.validate((valid) => {
    if (!valid) {
      return
    }
    console.log('设置基本告警', form.value)
    reqSetBasicAlarm(form.value).then(() => {
      ElMessage.success(t('successTip'))
    }).catch(() => {
      ElMessage.error(t('errorTip'))
    })
  })
}

const warningCycle = ['TCP', 'UDP']
</script>

<style scoped>
.table-header {
  background-color: #F5EFE9;
  height: 40px;
  display: flex;
  line-height: 40px;
  color: #161940;
  font-weight: bold;
  font-size: 14px;
  max-width: 800px;
}

.table-row {
  max-width: 1000px;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
}
</style>